$(function () {
     var seHeight = $(window).height() - 355;
    $('#areaContainerPare').css('height',seHeight + 'px');
    $('#areaContainer').css('height',seHeight + 'px');
    $('#kContainer').css('height',seHeight + 'px');
    var st;
    var data = {};
    var dayUnit = 5;
    var recMin = (new Date()).getMinutes();
    var $reporting = $("#report");
    // 绑定tab栏事件
    $("#feature-tab li").click(function () {
        var $li = $(this),
            $a = $li.find('a'),
            unit = $a.data('unit');
        $li.addClass('active').siblings().removeClass('active');
        if (unit == -1) {
            $("#areaContainer").css({
                "opacity":"1"
            }); //更改
            $("#kContainer").hide();
            $("#report").hide();           
        } else {
            $("#areaContainer").css({
                "opacity":"0"
            }); //更改
            $("#kContainer").show();
            $("#report").show();
            var id = $("#productId").val();

            //$.post("/site/ajax-product-config", {id: id}, function(msg) {
               // $.get($("#getStockDataUrl").val(), {id: $("#productId").val()}, function (msg) {
                   // data[unit] = transData(msg);
                   // console.log(data)

              //  });
            //}, 'json');
            // alert(id);
            $.post("/site/ajax-product-config", {id: id}, function(msg) {
                var data = {};
                $.get($("#getStockDataUrl").val(), {id: $("#productId").val()}, function (msg) {
                    console.log(msg.data)
                    data[-1] = transData(msg);
                    console.log(data)
                    getKlineStock(data, unit);
                });
            })
        }
    });

    Highcharts.setOptions({
        global: {
            useUTC: false
        },
        colors: ['#7cb5ec', '#7cb5ec', '#7cb5ec', '#7cb5ec', '#7cb5ec', '#7cb5ec', '#7cb5ec', '#7cb5ec', '#7cb5ec']
    });
    
    $.get($("#getStockDataUrl").val(), {id: $("#productId").val()}, function (msg) {
        data[-1] = transData(msg);
        getAreaStock(data);
        $.get($("#getStockDataUrl").val(), {id: $("#productId").val(), unit: 'day'}, function (msg) {
            data[dayUnit] = transData(msg);
        });
    });

    //产品的切换
    $('.selectProduct').on('change', function() {
        var id = $(this).val();
        $.post("/site/ajax-product-config", {id: id}, function(msg) {
            if (msg.state) {
                clearInterval(st);
                var info = msg.info;
                $('#productId').val(id);
                $('.selectUnit').html(info.list + '<i class="icon glyphicon glyphicon-chevron-down"></i>');
                // $('p.ts').html('交易时间：周一至周五，' + info.time);
                $('p.ts').html(info.time);
                if (info.isTime == 1) {
                    $('.riseFall').removeClass('gray');
                    $('.curPrice').attr('data-value', 1);
                    // $('.curPrice').data('value',1);
                    
                } else {
                    $('.riseFall').addClass('gray');
                    $('.curPrice').attr('data-value', -1);
                    // $('.curPrice').data('value',-1);
                }
                $('.curPrice').html(info.price);
                //负值涨跌参数
                var data = msg.data;
                var rate = (parseFloat(data[0].one_profit) + 100),
                    html = '回报率：' + rate + '%';
                $('.riseRate').html(html);
                $('.fallRate').html(html);
                $('#fallRate').val(rate);
                $('.buyContent1 .orderProfit').html(rate * parseFloat($('.orderBuy').val()) / 100);
                $.get($("#getStockDataUrl").val(), {id: $("#productId").val()}, function (msg) {
                    data[-1] = transData(msg);
                    $("#areaContainer").css({
                        'opacity':1
                    });
                    $("#kContainer").hide();
                    $("#report").hide();
                    $("#feature-tab").find("li").removeClass("active");
                    $("#feature-tab").find("li").eq(0).addClass("active");
                    getAreaStock(data);
                //    var sumrow = $("#feature-tab").find(".active a").data("unit");
                //    if(sumrow != -1){
                //        getKlineStock(data,sumrow);
                //    }
                    $.get($("#getStockDataUrl").val(), {id: $("#productId").val(), unit: 'day'}, function (msg) {
                        data[dayUnit] = transData(msg);
                    });
                });
            } else {
                $.alert(msg.info);
            }
        }, 'json');
    });

    // 获取最新数据
    var getPrice = function(chart, count) {
        //是否属于期货
        var json = $("#jsonData").html();
        if ($('.curPrice').attr('data-value') == -1) {
            return false;
        }
        var mydate = new Date();
        //交易时间：周一至周五，上午10:00至次日凌晨02:00 mydate.getHours(); //获取当前小时数(0-23)
        // if (mydate.getDay() == 0 || mydate.getDay() == 6) {
        //     return $('.curPrice').html('休市');
        // } else {
            $.get('/price.json?' + Math.random(), function(newData) {
                var nowProduct = $(".curPrice").data('name'),
                    price = parseFloat(newData[nowProduct]),
                    date = new Date(),
                    minute = (new Date()).getMinutes(),
                    x = Date.parse(date.format('yyyy/MM/dd hh:' + minute + ':00')),
                    length = chart.data.length;

                $('.selectProduct>li').each(function(){
                    var close = $(this).data('price'),
                        name = $(this).data('name');
                        // sale = $(this).data('sale');
                    // if (sale == 1) {
                        if (newData[name] > close) {
                            $(this).find('.number').removeClass("down-number").addClass("up-number").html(newData[name] + '<span class="up"></span>');
                        } else if (newData[name] < close) {
                            $(this).find('.number').removeClass("up-number").addClass("down-number").html(newData[name] + '<span class="down"></span>');
                        }
                    // }
                });
                var lastPrice = $('.curPrice').html();
                //价格箭头跳动
                if (price != lastPrice) {
                    $('.curArrow img').remove();
                    $('.curArrow .curPrice').removeClass('lred').removeClass('lgreen');
                    $('.nowPrice').removeClass('up-text').removeClass('down-text');
                }
                $('.nowPrice').html(price);
                if (price > lastPrice) {
                    $('.curArrow .curPrice').addClass('lred');
                    $('.nowPrice').addClass('up-text');
                    $('.curArrow').append('<img src="/images/arrow-top.png" style="width: 13px;vertical-align: top;margin-left:8px;">');
                } else if (newData[nowProduct] < lastPrice) {
                    $('.curArrow .curPrice').addClass('lgreen');
                    $('.nowPrice').addClass('down-text');
                    $('.curArrow').append('<img src="/images/arrow-down.png" style="width: 13px;vertical-align: top;margin-left:8px;">');
                }
                // tes(newData[nowProduct]);
                $('.curPrice').html(newData[nowProduct]);
            }, 'json');
        // }
    }

    function getAreaStock(data) {
        var length = data[-1].length;
        if (length > 60) {
            data = data[-1].slice(length - 60);
        } else {
            data = data[-1];
        }
        $('#areaContainer').highcharts('StockChart', {
            chart: {
                resetZoomButton: false,
                events: {
                    load: function () {
                        var series = this.series;
                        st = setInterval(function () {
                            getPrice(series[0]);
                        }, 1500);

                    }
                },
                backgroundColor:'#17182a',
                panning: false, //禁用放大
                pinchType: "null", //禁用手势操作
                zoomType: "null",
                panning: false,
                panKey: "shift"
            },
            title: {
                text: ''
            },
            rangeSelector: {
                enabled: false
            },
            XAxis: {
                reversed: true  //是否可以反转
            },
            yAxis: [{
                gridLineColor: '#424856',
                title: {
                    text: ''
                },
                labels: {
                    align: 'middle', //哪一部分是固定的
                    x: 2, //x轴的偏移量
                    style: {
                        color: '#E5E5E4',//颜色
                        fontSize:'12px'  //字体
                    }
                }, 
                opposite:false, //是否显示正常的轴面
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            }, {
                title: {
                    enabled: false
                },
                gridLineWidth: 1,
                minorGridLineWidth: 1,
                minorTickInterval: 5,
                plotBands: [{
                    from: 0,
                    to: 25,
                    color: '#FCFFC5'
                }]
            }],
            // 图例
            legend: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            tooltip: {
                formatter: function() {
                    return '<b>' + Highcharts.dateFormat('%H:%M:%S', this.x) + '</b><br/><b>价格：</b>' + Highcharts.numberFormat(this.y, 2);
                },
                followPointer:true,
                followTouchMove:true
            },
            credits:{
                enabled: false
            },
            scrollbar: {
                enabled: false
            },
            navigator: {
                enabled: false
            },
            series : [{
                name : 'price',
                type: 'line',
                data : data,
                lineColor:'#E5D100',
                lineWidth:1,
                tooltip: {
                    valueDecimals: 2
                },
                dataGrouping: {
                    enabled: false
                },
                fillColor : {
                    linearGradient : {
                        x1: 0,
                        y1: 0,
                        x2: 1,
                        y2: 1
                    },
                    stops : [
                        [0, Highcharts.getOptions().colors[1]],
                        [1, Highcharts.Color(Highcharts.getOptions().colors[5]).setOpacity(0).get('rgba')]
                    ]
                },
                threshold: null
            }]
        });
    }

    function getKlineStock(data, unit) {
        var circle;
        switch (unit) {
            case 0:
                circle = 1;
                break;
            case 1:
                circle = 5;
                break;
            case 2:
                circle = 15;
                break;
            case 3:
                circle = 30;
                break;
            case 4:
                circle = 60;
                break;
            case dayUnit:
                circle = 60 * 24;
                break;
        }
        if (!data[unit]) {
            data[unit] = [];
            var diff = 60 * 1000 * circle;
            var start = data[-1][0][0],
                end = 0,
                sub = [0, 0, 0, 999999, 0];
            for (var key in data[-1]) {
                end = data[-1][key][0];
                if (end - start >= diff) {
                    sub[4] = data[-1][key - 1][4];
                    data[unit].push(sub);
                    start = data[-1][key][0];
                    sub = [0, 0, 0, 999999, 0];
                }
                if (end == start) {
                    sub[0] = data[-1][key][0];
                    sub[1] = data[-1][key][1];
                }
                if (sub[2] < data[-1][key][2]) {
                    sub[2] = data[-1][key][2];
                }
                if (sub[3] > data[-1][key][3]) {
                    sub[3] = data[-1][key][3];
                }
            }
        }
        console.log(data[3])
        function exma(num,unit){
            var i,arr = []; 
            for (i = 0; i <data[unit].length; i++) {
                var dateUTC = data[unit][i][0];
                if(i>=num){
                    var ma5=0.00;
                    for( var j=0;j<num;j++){
                        ma5+=parseFloat(data[unit][i-j][4]);
                    }
                    arr.push([
                        parseInt(dateUTC), // the date
                        parseFloat(ma5/num)
                    ]);
                }
            }    
            return arr;
        }

        $('#kContainer').highcharts('StockChart', {
            title: {
                text: ''
            },
            chart: {
                resetZoomButton: false,
                backgroundColor: 'rgba(0,0,0,0)',
                border: 1,
                borderColor: '#C7CBD4',
                borderRadius: 0,
                panning: false, //禁用放大
                pinchType: "null", //禁用手势操作
                zoomType: "null",
                panning: false,
                panKey: "shift",
            },
            rangeSelector: {
                buttons: [{
                    type: 'minute',
                    count: 30,
                }, {
                    type: 'hour',
                    count: 2,
                }, {
                    type: 'hour',
                    count: 20,
                }, {
                    type: 'hour',
                    count: 40,
                }, {
                    type: 'hour',
                    count: 60,
                }, {
                    type: 'day',
                    count: 7,
                }],
                buttonTheme: {
                    style: {
                        display: 'none'
                    },
                },
                inputStyle: {
                    display: 'none'
                },
                labelStyle: {
                    display: 'none'
                },
                selected: unit,
            },
            scrollbar: {
                enabled: false
            },
            navigator: {
                enabled: false
            },
            credits:{
                enabled: false
            },
            tooltip: {
                formatter: function() {
                    var date, hour, minute;
                    var fix = function (num) {
                        if (num < 10) {
                            return '0' + num;
                        } else {
                            return num;
                        }
                    }
                    if (unit == dayUnit) {
                        date = Highcharts.dateFormat('%m-%d', this.x);
                    } else if (circle == 1) {
                        date = Highcharts.dateFormat('%m-%d', this.x)+"  "+Highcharts.dateFormat('%H:%M', this.x);
                    } else {
                        minute = parseFloat(Highcharts.dateFormat('%M', this.x));
                        minute = Math.round(minute / 5) * 5;
                        if (minute == 60) {
                            hour = parseFloat(Highcharts.dateFormat('%H', this.x)) + 1;
                            date = fix(hour) + ':00';
                        } else {
                            date = Highcharts.dateFormat('%H:', this.x) + fix(minute);
                        }
                        date = Highcharts.dateFormat('%m-%d', this.x)+"  "+date;
                    }
                    if(this.points.length == 2){
                        console.log(this.points)
                        MMA1 =this.points[1].y.toFixed(2);
                        // MMA5 =this.points[2].y.toFixed(2);
                        // MMA15 =this.points[3].y.toFixed(2);
                        $reporting.html(
                            '  <br/><b style="color:#00FF00;width:33%;padding-left:10px">MA1:</b> '+ MMA1
                            // +'  <b style="color: #3300FF;width:33%;padding-left:20px">MMA5:</b> '+ MMA5
                            // +'  <b style="color:#FF0000;width:33%;padding-left:20px">MMA15:</b> '+ MMA15
                        );
                    }else if(this.points.length == 3){
                        console.log(this.points)
                        MMA1 =this.points[1].y.toFixed(2);
                        MMA5 =this.points[2].y.toFixed(2);
                        // MMA15 =this.points[3].y.toFixed(2);
                        $reporting.html(
                            '  <br/><b style="color:#00FF00;width:33%;padding-left:10px">MA1:</b> '+ MMA1
                                +'  <b style="color: #3300FF;width:33%;padding-left:20px">MA5:</b> '+ MMA5
                            // +'  <b style="color:#FF0000;width:33%;padding-left:20px">MMA15:</b> '+ MMA15
                        );
                    }else if(this.points.length == 4){
                        console.log(this.points)
                        MMA1 =this.points[1].y.toFixed(3);
                        MMA5 =this.points[2].y.toFixed(3);
                        MMA15 =this.points[3].y.toFixed(3);
                        $reporting.html(
                            '  <br/><b style="color:#00FF00;width:33%;padding-left:10px">MA1:</b> '+ MMA1
                                +'  <b style="color: #3300FF;width:33%;padding-left:10px">MA5:</b> '+ MMA5
                            +'  <b style="color:yellow;width:33%;padding-left:10px">MA15:</b> '+ MMA15
                        );
                    }else {
                         $reporting.html(
                           ""
                        );
                    }
                    return '<b>' + date + '</b><br/>' + 
                           '<b>开盘价：</b>' + Highcharts.numberFormat(this.points[0]['point']['open'], 2) + '<br/>' + 
                           '<b>最高价：</b>' + Highcharts.numberFormat(this.points[0]['point']['high'], 2) + '<br/>' + 
                           '<b>最低价：</b>' + Highcharts.numberFormat(this.points[0]['point']['low'], 2) + '<br/>' + 
                           '<b>收盘价：</b>' + Highcharts.numberFormat(this.points[0]['point']['close'], 2)+'<br/>'
                    
                },
                followPointer:true,
                followTouchMove:true,
            },
            plotOptions: {
                candlestick: {
                    upColor: '#f0302d',        // 涨 颜色
                    upLineColor: '#f0302d',    // 涨 线条颜色
                    color: '#17b03e',        // 跌 颜色
                    lineColor: '#17b03e'     // 跌 线条颜色
                }
            },
            xAxis: {
                labels: {
                    formatter: function () {
                        return Highcharts.dateFormat(unit == dayUnit ? '%m-%d' : '%H:%M', this.value);
                    },
                }
            },
            yAxis: [{
                gridLineColor: '#424856',
                labels: {
                    align: 'left',
                    x: 2,
                    style: {
                        color: '#E5E5E4',//颜色
                        fontSize:'12px'  //字体
                    }
                }, 
                lineWidth: 1

            }],
            series: [{
                type: 'candlestick',
                name: $("#futuresName").val(),
                data: data[unit],
                dataGrouping: {
                    enabled: false
                },
                tooltip: {
                    valueDecimals: 2
                }
            }/*,
            {
                type: 'spline',
                name: 'MMA1',
                color:'#00FF00',
                data: exma(1, unit),
                lineWidth:1,
                dataGrouping: {
                    enabled: false
                }
            },
            {
                type: 'spline',
                name: 'MMA5',
                data: exma(5, unit),
                color:'#fff',
                threshold: null, 
                lineWidth:1,
                dataGrouping: {
                    enabled: false
                }
            },
            {
                type: 'spline',
                name: 'MMA15',
                data: exma(15, unit),
                color:'yellow',
                threshold: null, 
                lineWidth:1,
                dataGrouping: {
                    enabled: false
                }
            }*/
            ]

        });
    }

    var transData = function (data) {
        var arr = [];
        for (var i in data) {
            arr.push([
                parseFloat(data[i]['time']), // the date
                parseFloat(data[i]['open']), // open
                parseFloat(data[i]['high']), // high
                parseFloat(data[i]['low']), // low
                parseFloat(data[i]['close']) // close
            ]);
        }
        return arr;
    }

    
});
